<template>
  <view class="my-container">
    <!--用户未登录  -->
    <block v-if="!token">
      <image class="avatar avatar-img" src="/static/images/default-avatar.png" mode="scaleToFill" />
      <view class="login-desc">登录后可同步数据</view>
      <!-- #ifdef MP-WEIXIN -->
      <button class="login-btn" type="primary" @click="getUserInfo">微信用户一键登录</button>

      <!-- #endif -->
      <!-- #ifndef MP-WEIXIN -->
      <button class="login-btn" type="primary" @click="onAutoLogin">微信用户一键登录</button>

      <!-- #endif -->
    </block>
    <!-- 用户已登录 -->
    <block v-else>
      <image class="avatar avatar-img" :src="userInfo.avatarUrl" mode="scaleToFill" />
      <view class="login-desc">{{ userInfo.nickName }}</view>
      <button class="login-btn" type="default" @click="onLogoutClick">退出登录</button>
    </block>
  </view>
</template>

<script>
import { mapActions, mapState } from 'vuex'
export default {
  name: 'my-login',
  data() {
    return {}
  },
  computed: {
    ...mapState('user', ['token', 'userInfo'])
  },
  methods: {
    ...mapActions('user', ['login', 'logout']),
    /**
     * 微信一键登录点击事件
     */
    getUserInfo() {
      // 展示加载框
      uni.showLoading({
        title: '加载中'
      })
      // 获取用户信息，调用Login接口
      uni.getUserProfile({
        desc: '登录后可同步数据',
        success: async obj => {
          // obj就是微信授权成功后返回的用户信息，将用户信息存储到vuex中
          await this.login(obj)
          // 登录成功之后，发送事件给父组件回退页面，就是使用当前组件中的组件。
          this.$emit('onLoginSuccess')
        },
        fail: () => {
          uni.showTabBar({
            title: '授权已取消',
            icon: 'none',
            mask: true
          })
        },
        // 关闭需要在这回调中使用，因为getUserProfile是异步的，同步的showLoading、hideLoading会先执行完成
        complate: () => {
          // 关闭加载
          uni.hideLoading()
        }
      })
    },
    /**
     * 退出登录
     */
    onLogoutClick() {
      uni.showModal({
        title: '提示',
        content: '退出登录将无法同步数据哦~',
        success: res => {
          if (res.confirm) {
            this.logout()
          }
        }
      })
      console.log(this.token, this.userInfo)
    },
    /**
     * 非微信端登录请求
     */
    async onAutoLogin() {
      // 模拟登录，非微信端是无法获取微信信息的，所以模拟登录的数据存储到vuex中
      uni.showLoading({
        title: '加载中'
      })
      await this.login({
        encryptedData: 'BmGEMqpGI5w',
        errMsg: 'getUserProfile:ok',
        iv: 'c+NbINO4CuEWCBYGG2FxWw==',
        rawData:
          '{"nickName":"小慕同学","gender":1,"language":"zh_CN","city":"","province":"","country":"China","avatarUrl":"https://m.imooc.com/static/wap/static/common/img/logo-small@2x.png"}',
        signature: '449a10f11998daf680fe546a5176e6e2973516ce',
        userInfo: { nickName: '小慕同学', gender: 1, language: 'zh_CN', city: '', province: '' }
      })
      // 登录成功之后，发送事件给父组件回退页面，就是使用当前组件中的组件。
      this.$emit('onLoginSuccess')
      uni.hideLoading()
    }
  }
}
</script>

<style lang="scss" scoped>
.my-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 25%;
  .avatar-img {
    width: 78px;
    height: 78px;
  }
  .login-desc {
    color: $uni-text-color-grey;
    font-size: $uni-font-size-base;
    margin-top: $uni-spacing-col-big;
  }
  .login-btn {
    margin-top: $uni-spacing-col-big;
    width: 85%;
  }
}
</style>
